<!-- 我的页面 -->
<template>
    <view>
        <!-- 占位布局 -->
        <view :style="{height: getHeadHeight()+'px'}"></view>
        <!-- 用户信息布局 -->
        <view class="box-user box-flex-center">
            <view class="box-user-head">
                <image src="../../static/image/logo.png" mode="aspectFill"></image>
            </view>
            <view class="box-user-ip">{{userInfo.IP}}</view>
            <view>{{userInfo.address.city || userInfo.address.province}}</view>
        </view>
        <!-- 菜单布局 -->
        <view class="box-menu">
            <!-- 我的下载布局 -->
            <view class="box-menu-item box-flex-space" @click="onMyDownload">
                <view class="box-flex-center">
                    <uni-icons type="download" size="30"></uni-icons>
                    <view class="">我的下载</view>
                </view>
                <view>{{userInfo.downloadSize}}</view>
            </view>
            <!-- 我的评分布局 -->
            <view class="box-menu-item box-flex-space" @click="onMyScore">
                <view class="box-flex-center">
                    <uni-icons type="star" size="30"></uni-icons>
                    <view class="">我的评分</view>
                </view>
                <view>{{userInfo.scoreSize}}</view>
            </view>
            <!-- 联系客服布局 -->
            <view class="box-menu-item box-flex-space">
                <view class="box-flex-center">
                    <uni-icons type="chatboxes" size="30"></uni-icons>
                    <view class="">联系客服</view>
                </view>
                <!-- 小程序是联系客服，非小程序是拨打电话 -->
                <!-- #ifdef MP -->
                <button open-type="contact">联系客服</button>
                <!-- #endif -->
                <!-- #ifndef MP -->
                <button @click="onContact">拨打电话</button>
                <!-- #endif -->
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { ref } from "vue";
    import { onPullDownRefresh } from "@dcloudio/uni-app";
    import { getHeadHeight } from "@/utils/system.ts";
    import { makePhoneCall, navigateTo } from "@/utils/uni-api.ts";
    import { url_subject_detail } from "@/utils/url.ts";
    import { api_getUserInfo } from "@/api/api.ts";

    //参数
    let userInfo = ref({ IP: "", downloadSize: 0, scoreSize: 0, address: { city: "", province: "" } });

    //初始方法执行
    getUserInfo();

    //内部事件
    //点击拨打电话
    function onContact() {
        makePhoneCall({ phone: 114 });
    };
    //点击我的下载
    function onMyDownload() {
        navigateTo({ url: url_subject_detail + "?name=我的下载&type=download" });
    };
    //点击我的评分
    function onMyScore() {
        navigateTo({ url: url_subject_detail + "?name=我的评分&type=score" });
    };

    //页面生命周期
    //下拉刷新
    onPullDownRefresh(() => {
        getUserInfo().finally(() => {
            uni.stopPullDownRefresh();
        });
    });

    //网络请求
    //获取用户信息
    async function getUserInfo() {
        let res : any = await api_getUserInfo();
        userInfo.value = res.data;
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-user {
        flex-direction: column;

        .box-user-head {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            overflow: hidden;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .box-user-ip {
            padding: 10rpx;
        }
    }

    .box-menu {
        margin: 30rpx;
        border: 1px solid $custom-color-black;

        .box-menu-item {
            border-bottom: 1px solid $custom-color-black;
            padding: 10rpx;
            position: relative;

            button {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
        }

        .box-menu-item:last-child {
            border-bottom: 0;
        }
    }
</style>